import { FC, Suspense } from 'react'
// 引入路由配置类型
import * as Type from '@/type/index'
// 引入路由插件
import { HashRouter, BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
type Props = {
    routes: Type.RouteList  // 路由表
    mode: "hash" | "history"  // 路由模式
}
const RouterView:FC<Props> = ({ routes, mode }) => {
    const renderRoutes = (arr: Type.RouteList) => {
        return arr && arr.map((item, index) => {
            return <Route key={index} path={item.path}
                element={item.element ? <item.element /> : <Navigate
                    to={item.to as string}></Navigate>}>
                        {
                            item.children && renderRoutes(item.children)
                        }
            </Route>
        })
    }
    return (
        <Suspense fallback={<div>加载中...</div> }>
            {
                mode === "history" ?
                 <BrowserRouter>
                    <Routes>
                        {
                            renderRoutes(routes)
                        }
                    </Routes>
                </BrowserRouter> :
                <HashRouter>
                    <Routes>
                        {
                            renderRoutes(routes)
                        }
                    </Routes>
                </HashRouter>
            }
        </Suspense>
    )
}
    export default RouterView
